<script lang="ts" setup>
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import { get, post, message, loadFile } from '@/utils'
import useValueEnum from '@/hooks/useValueEnum'
const props = defineProps<{
  show: boolean
  id: number | string
  parentId: any
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { formatColumns } = useTable()
const searchKey = ref('id')

const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = {
      ...params,
      size: params.pageSize,
      [searchKey.value]: searchKey.value == 'id' ? props.parentId : props.id,
    }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-user/admin/user/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const { valueEnum: levelValueEnum } = useValueEnum('/server-user/admin/user/level/list')
const columns = formatColumns([
  {
    title: '用户头像',
    dataIndex: 'avatar',
    width: 100,
    valueType: 'image',
  },
  { title: '用户昵称', dataIndex: 'nickName', width: 200 },

  {
    title: '用户等级',
    dataIndex: 'level',
    width: 150,
    valueEnum: levelValueEnum,
  },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    ellipsis: true,
  },
])
</script>
<template>
  <CModal v-model:visible="props.show" :footer="false" width="1300px" title="团队记录" @cancel="emit('update:show', false)">
    <div class="page">
      <a-tabs @change="() => actionRef.reload()" v-model:active-key="searchKey">
        <a-tab-pane title="推荐人" key="id" />
        <a-tab-pane title="一级会员" key="parentId" />
        <a-tab-pane title="二级会员" key="grandpaId" />
      </a-tabs>
      <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" :scroll="{ x: 1000 }" column-resizable :params="{}" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
        <template #option-render="{ dom, reset }">
          <component :is="dom[1]" />
          <component :is="dom[0]" />
        </template>
      </ProTable>
    </div>
  </CModal>
</template>
<style lang="less" scoped>
.page {
  :deep(.arco-form) {
    display: none;
  }
}
</style>
